<template>
  <div class="login_container">
    <!-- 创建一个登录的盒子，去自定义组件 -->
    <div class="login_box">  
      <p class="login-title">唯&nbsp依&nbsp系&nbsp统</p>    
      <!-- 校验规则校验的是prop这个属性绑定的数据，未定义对象的原因可能是变量名写错  -->
      <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-width="0px" class="login_form">
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- type="password" 代表是一个密码类型的文本框 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-s-goods" placeholder="请输入密码"
            type="password"></el-input>
        </el-form-item>
        <!-- 重置整个表单可以拿到整个表单的对象，先在el-form组件定义一个ref属性，调用resetFields整个函数即可重置表单, -->
        <!-- 点击登录按钮向后端发送请求时先要经过预校验,使用validate方法，成功返回true，不成功返回false -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这是登录表单数据的绑定对象
      loginForm: {
        userName: 'admin',
        password: '888888'
      },
      // 这是表单的验证规则的对象
      loginFormRules: {
        // 验证用户名是否合法，message指的是返回错误的消息，trigger: 'blur'指的是失去焦点以后触发这个验证规则
        userName: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    // 点击重置按钮，重置登录表单,this指的是当前表单的对象
    resetLoginForm() {
      //  console.log(this)
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        // 解构这个data属性重命名为res
        const userName = this.loginForm.userName;
        const { data: res } = await this.$http.post("/login", this.loginForm)
        console.log(res); // 对于返回结果是promise，可以使用await和async函数优化，
        // await只能用于被async修饰的方法中，把紧挨着await的方法修饰成async方法
        if (res.flag !== 0) {
          return this.$message.error('登录失败')
        }
        this.$message.success('登录成功')
        // 将返回的token设置到sessionStorage中
        window.sessionStorage.setItem("token", res.data.token)
        // 将登录成功之后的token保存到客户端的sessionStorage中,不使用localStorage的原因是localStorage是持久化使用机制
        // sessionStorage是当前会话的使用机制
        // 项目中除了登录之外的其他API接口必须在登录之后才能访问
        // token只应该在当前网站打开期间生效，所以将token保存在sessionStorage中，通过编程式导航跳转到后台主页，路由地址是/home
        this.$router.push("/home")
      });
    }
  }
}
</script scoped>
<!-- lang属性指的是支持less语言,scoped属性指的是只支持当前vue文件的样式 -->
<style lang="less" scoped>

.login-title {
  font-family: '楷体', '楷体_GB2312', 'STKaiti', '华文楷体', 'kaiti', serif;  
  font-size: 50px;
  color: rgb(179, 149, 149);
  margin-top: 30px; /* 设置上间隔 */
  text-align: center; /* 文字居中 */
}

// 一开始背景颜色是不会占满全屏的，应为被html限制了
.login_container {
  background: url(@/assets/images/login.jpeg)no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
}

.login_box {
  width: 450px;
  height: 300px;
  border-radius: 3px;
  box-shadow: 0 3px 20px 22px rgba(0, 0, 0, .3); //是否有阴影
  position: absolute; //相对定位
  left: 75%; //靠左边50%
  top: 50%; //靠上边50%
  transform: translate(-75%, -50%); //自身向left和top的相反方向移动50%
}

.btns {
  display: flex; //使按钮变成一个弹性的模型
  justify-content: flex-end; //该样式是尾部对齐
}

// 一般浏览器默认为标准盒子模型。即:box-sizing:content-box
// 可根据实际项目需要自行设置。即：box-sizing:border-box
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>